<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
    <meta name="renderer" content="webkit">
    <script src="../../../node_modules/jquery/dist/jquery.min.js"></script>
    <link rel="stylesheet" href="../../../node_modules/bootstrap/dist/css/bootstrap.min.css">
    <script src="../../../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="../../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="../../../node_modules/vue/dist/vue.min.js"></script>
    <link rel="stylesheet" href="../../../node_modules/element-ui/lib/theme-chalk/index.css">
    <script src="../../../node_modules/element-ui/lib/index.js"></script>
    <script src="../../../node_modules/echarts/dist/echarts.js"></script>


    <!-- 自定义 -->
    <script src="../../../node_modules/mockjs/dist/mock.js"></script>
    <script src="../static/js/mock_config.js"></script>
    <script src="../static/js/index.js"></script>
    <link rel="stylesheet" href="../../index.css">

    <!-- pc -->
    <link rel="stylesheet" href="../static/css/staffMember.css" media="only screen and (max-height:1600px)" >
    <!-- 手机APP -->
    <link rel="stylesheet" href="../static/css/ModSaleApp.css" media="only screen and (min-height:1600px)" >
</head>

<body>
    <!--主体-->
    <div class="main clearfix" id="app">
        <div class="header" style="padding-top: 25px; ">
            <header>
                <div class="navbar">
                    <div class="card A" >
                        <ul>
                            <li>
                                <h8 style="line-height: 78px;">人事看板</h8>
                            </li>
                        </ul>

                    </div>
                    <div class="card-left" style="display:flex;">
                        <div class="card B" >
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item">
                                    <h4>在职员工</h4>
                                </li>
                                <li class="list-group-item1">
                                    <h3 id="zaizhi">0</h3>
                                </li>
                            </ul>
                        </div>
                        <div class="card B" >
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item">
                                    <h4>全职</h4>
                                </li>
                                <li class="list-group-item1">
                                    <h3 id="quanzhi">0</h3>
                                </li>
                            </ul>
                        </div>
                        <div class="card B" >
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item">
                                    <h4>共享</h4>
                                </li>
                                <li class="list-group-item1">
                                    <h3 id="gongxiang">0</h3>
                                </li>
                            </ul>
                        </div>
                        <div class="card B" >
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item">
                                    <h4>劳务</h4>
                                </li>
                                <li class="list-group-item1">
                                    <h3 id="laowu">0</h3>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="card-right" style="display:flex;">
                        <div class="card C" >
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item">
                                    <h4>试用期</h4>
                                </li>
                                <li class="list-group-item1">
                                    <h3 id="shiyongqi">0</h3>
                                </li>
                            </ul>
                        </div>
                        <div class="card C" >
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item">
                                    <h4>待签订合同</h4>
                                </li>
                                <li class="list-group-item1">
                                    <h3 id="Waithe">0</h3>
                                </li>
                            </ul>
                        </div>
                        <div class="card C" >
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item">
                                    <h4>待参保</h4>
                                </li>
                                <li class="list-group-item1">
                                    <h3 id="Waitbao">0</h3>
                                </li>
                            </ul>
                        </div>
                        <div class="card C" >
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item">
                                    <h4>待定薪</h4>
                                </li>
                                <li class="list-group-item1">
                                    <h3 id="Waitxin">0</h3>
                                </li>
                            </ul>
                        </div>
                        <div class="card C buttom" >
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item">
                                    <h4>待离职</h4>
                                </li>
                                <li class="list-group-item1">
                                    <h3 id="Waitli">0</h3>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </header>
        </div>


        <div class="body_div">
            <div class="main-left">
                <div class="border-container">
                    <div class="name-title">
                        员工类型
                    </div>
                    <span class="top-left border-span"></span>
                    <span class="top-right border-span"></span>
                    <span class="bottom-left border-span"></span>
                    <span class="bottom-right border-span"></span>
                </div>

                <div class="border-container">
                    <div class="name-title">
                        司龄分布
                    </div>
                    <span class="top-left border-span"></span>
                    <span class="top-right border-span"></span>
                    <span class="bottom-left border-span"></span>
                    <span class="bottom-right border-span"></span>
                </div>

                <div class="border-container">
                    <div class="name-title">
                        待定
                    </div>
                    <span class="top-left border-span"></span>
                    <span class="top-right border-span"></span>
                    <span class="bottom-left border-span"></span>
                    <span class="bottom-right border-span"></span>
                </div>
            </div>
            <div class="center">
                <div class="border-container">
                    <div class="name-title">
                        入职
                    </div>
                    <span class="top-left border-span"></span>
                    <span class="top-right border-span"></span>
                    <span class="bottom-left border-span"></span>
                    <span class="bottom-right border-span"></span>
                </div>

                <div class="border-container">
                    <div class="name-title">
                        离职
                    </div>
                    <span class="top-left border-span"></span>
                    <span class="top-right border-span"></span>
                    <span class="bottom-left border-span"></span>
                    <span class="bottom-right border-span"></span>
                </div>

                <div class="border-container">
                    <div class="name-title">
                        待定
                    </div>
                    <span class="top-left border-span"></span>
                    <span class="top-right border-span"></span>
                    <span class="bottom-left border-span"></span>
                    <span class="bottom-right border-span"></span>
                </div>

            </div>
            <div class="main-right">
                <div class="border-container">
                    <div class="name-title">
                        月薪资汇总
                    </div>
                    <span class="top-left border-span"></span>
                    <span class="top-right border-span"></span>
                    <span class="bottom-left border-span"></span>
                    <span class="bottom-right border-span"></span>
                </div>

                <div class="border-container">
                    <div class="name-title">
                        部门薪资占比
                    </div>
                    <span class="top-left border-span"></span>
                    <span class="top-right border-span"></span>
                    <span class="bottom-left border-span"></span>
                    <span class="bottom-right border-span"></span>
                </div>

                <div class="border-container">
                    <div class="name-title">
                        待定
                    </div>
                    <span class="top-left border-span"></span>
                    <span class="top-right border-span"></span>
                    <span class="bottom-left border-span"></span>
                    <span class="bottom-right border-span"></span>
                </div>
            </div>
        </div>
    </div>

</body>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                el_table_height4: 422
            }
        },
        methods: {
        },

        mounted() {
            //在职员工
            GetCodeData("VB22081316155361", "Get", "value").then(function(res) {
                        $('#zaizhi').text("" + res.rows[0].Column1)
                    })
            //全职
            GetCodeData("VB22081316160266", "Get", "value").then(function(res) {
                         $('#quanzhi').text("" + res.rows[0].Column1)
                    })
            //共享
            GetCodeData("VB22081316161210", "Get", "value").then(function(res) {
                         $('#gongxiang').text("" + res.rows[0].Column1)
                    })
            //劳务
            GetCodeData("VB22081316162026", "Get", "value").then(function(res) {
                         $('#laowu').text("" + res.rows[0].Column1)
                    })
            //试用期
            GetCodeData("VB22081316163171", "Get", "value").then(function(res) {
                         $('#shiyongqi').text("" + res.rows[0].Column1)
                    })
            //待签订合同
            GetCodeData("VB22081316165430", "Get", "value").then(function(res) {
                         $('#Waithe').text("" + res.rows[0].Column1)
                    })
            //待参保
            GetCodeData("VB22081316170430", "Get", "value").then(function(res) {
                         $('#Waitbao').text("" + res.rows[0].Column1)
                    })
            //待定薪
            GetCodeData("VB22081316171445", "Get", "value").then(function(res) {
                         $('#Waitxin').text("" + res.rows[0].Column1)
                    })
            //待离职
            GetCodeData("", "Get", "value").then(function(res) {
                        //  $('#Waitli').text("" + res.rows[0].Column1)
                    })
        }
    })
</script>



</html>